<template>
  <div style="background-color: #eeeeee;height:932px">
    <van-nav-bar
        title="我的押金"
        left-text="返回"
        left-arrow
        @click-left="onClickLeft"
    />
    <div>
      <van-cell title="押金状态" :value="depositStatus ? '已缴纳' : '未缴纳'" />
    </div>
<!--    押金缴纳输入框及按钮-->
    <van-cell title="押金" is-link @click="showPopup" />
    <van-popup v-model:show="show" :style="{ padding: '64px' }">
      <van-cell-group inset>
        <van-field v-model="deposit" type="deposit" label="押金金额：" />
        <van-button type="danger">取消</van-button>
        <van-button type="warning" @click="yes">请输入密码 </van-button>
        <van-button type="warning" @click="sssss">确认 </van-button>
      </van-cell-group>
    </van-popup>

<!--  底部密码弹出层  -->
    <van-popup
        v-model:show="showBottom"
        position="bottom"
        :style="{ height: '37%' }"
    >
      <!-- 密码输入框 -->
      <van-password-input
          :value="value1"
          :focused="showKeyboard"
          @focus="showKeyboard = true"
      />

      <!-- 数字键盘 -->
      <van-number-keyboard
          v-model="value1"
          :show="showKeyboard"
          theme="custom"
          extra-key="."
          close-button-text="完成"
          @blur="showKeyboard = false"
          @click="onInput"
          @delete="onDelete"
      />
    </van-popup>
<!--活动专属福利-->
    <p style="font-size: 15px;">正在享受的押金权益</p>
    <van-card
        num="2"
        price="200.00"
      desc="描述信息"
        title="专属福利"
        thumb="https://ts1.cn.mm.bing.net/th/id/R-C.739c357ae9095a519fb0194dc3bfd225?rik=%2bKNbVoNJbBr7jw&riu=http%3a%2f%2fpic.ntimg.cn%2ffile%2f20191220%2f23714544_164449307080_2.jpg&ehk=vK7l8ZZoSMpSaNi5l5KTFoEGaicLlU5tEGdeNJgJna4%3d&risl=&pid=ImgRaw&r=0"
    >
      <template #tags>
        <van-tag plain type="primary">电卡优惠权益</van-tag>
        <van-tag plain type="primary">优惠券权益</van-tag>
      </template>
      <template #footer>
        <van-button size="mini" @click="xiangqing">点击详情</van-button>
      </template>
    </van-card>
<!--    底部退还押金-->
    <van-cell title="退还押金" is-link @click="showPopupbottom" style="margin-top: 529px"/>
  </div>
</template>
<script setup>
import {useRouter} from "vue-router";
import { ref } from 'vue';
import {showConfirmDialog} from "vant";
import request from "@/request/request.js";
import { showSuccessToast, showFailToast } from 'vant';
const route = useRouter()
const onClickLeft = () => {
  // 返回上一页
  route.push('/home')
}

const show = ref(false);
const showPopup = () => {
  show.value = true;
};
// 提示
showConfirmDialog({
  title: '押金缴纳用户协议',
  message:
      '如果解决方法是丑陋的，那就肯定还有更好的解决方法，只是还没有发现而已。',
})
    .then(() => {
      // on confirm
    })
    .catch(() => {
      // on cancel
    });
// 按钮弹出密码
const showBottom = ref(false);
const yes =()=>{
  showBottom.value = true;

}
const value1 = ref('');
const showKeyboard = ref(true);
const deposit =ref('')
const sssss =()=>{
  request({
    url: '/sysuser/addDeposit',
    method:'post',
    params: {
      deposit: deposit.value
    }
  }).then(res=>{
    if (res.data.code == 200){
      showSuccessToast('押金缴纳成功');
    }else{
      showFailToast('押金缴纳失败');
    }
  })
}
const xiangqing=()=>{
  route.push('/detail')
}
// 押金状态
import { onMounted } from 'vue';
import {zhuangT} from "@/api/zhuangT.js";
// 模拟从后端获取的数据
const depositStatus = ref(false);

// 模拟从后端获取押金状态的方法
const fetchDepositStatus = async () => {
  // codeMessage.value="已缴纳"
  const {data} = await zhuangT();
  console.log(data)
  if (data.code==200){
    depositStatus.value=true;
  }else {
    depositStatus.value = false;
  }
};


onMounted(() => {
  fetchDepositStatus();
});

// 底部弹出
const showbottom = ref(false);
const showPopupbottom = () => {
  showbottom.value = true;
  showConfirmDialog({
    title: '提示',
    message:
        '确认退还押金吗。'
  })
      .then(() => {
        // on confirm
        route.push('/sendback')
      })
      .catch(() => {
        // on cancel
      });
};
</script>